<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>干线协调优化平台 - 用户管理</title>
    <link rel="stylesheet" href="../components/libs/fontawesome/6.7.2/css/all.min.css" />
    <link rel="stylesheet" href="../components/common/base.css">
    <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="./users.css" />
</head>

<body class="bg-dark-gradient">
    <!-- 顶部导航组件 -->
    <header class="layout-header">
        <!-- Logo区域 -->
        <div class="layout-logo">
            <i class="fas fa-traffic-light logo-icon"></i>
            <span class="logo-text">干线协调优化平台</span>
        </div>
        
        <!-- 弹性空间 -->
        <div class="header-spacer"></div>
        
        <!-- 业务菜单 -->
        <nav class="header-nav">
            <a href="index.html" class="nav-item" data-action="home">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </a>
            <a href="greenwave-sections.html" class="nav-item" data-action="sections">
                <i class="fas fa-road"></i>
                <span>绿波路段</span>
            </a>
            <a href="users.html" class="nav-item active" data-action="users">
                <i class="fas fa-users-cog"></i>
                <span>用户管理</span>
            </a>
        </nav>
    </header>

    <!-- 主内容区域 -->
    <main class="main-content">
        <div class="users-container">
            <!-- 页面标题区域 -->
            <header class="users-header">
                <div class="users-title">
                    <i class="fas fa-users-cog"></i>
                    <h1>用户权限管理系统</h1>
                    <span class="subtitle">管理平台用户账号与权限设置</span>
                </div>
                <div class="users-stats">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-user-plus"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">42</div>
                            <div class="stat-label">总用户数</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon success">
                            <i class="fas fa-user-check"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">38</div>
                            <div class="stat-label">活跃用户</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon warning">
                            <i class="fas fa-user-clock"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">3</div>
                            <div class="stat-label">待审核</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon info">
                            <i class="fas fa-user-shield"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">5</div>
                            <div class="stat-label">管理员</div>
                        </div>
                    </div>
                </div>
            </header>

            <!-- 搜索筛选区域 -->
            <section class="filter-section">
                <div class="filter-container">
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-search"></i>
                            用户搜索
                        </label>
                        <input type="text" class="filter-input" placeholder="输入用户名或ID">
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-filter"></i>
                            用户角色
                        </label>
                        <select class="filter-select">
                            <option value="">全部角色</option>
                            <option value="admin">系统管理员</option>
                            <option value="operator">操作员</option>
                            <option value="viewer">观察员</option>
                            <option value="auditor">审计员</option>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-calendar"></i>
                            注册时间
                        </label>
                        <div class="filter-inputs">
                            <input type="date" class="filter-input">
                            <span class="filter-separator">至</span>
                            <input type="date" class="filter-input">
                        </div>
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-user-tag"></i>
                            状态筛选
                        </label>
                        <select class="filter-select">
                            <option value="">全部状态</option>
                            <option value="active">活跃</option>
                            <option value="inactive">未激活</option>
                            <option value="locked">已锁定</option>
                            <option value="pending">待审核</option>
                        </select>
                    </div>
                    
                    <div class="filter-actions">
                        <button class="btn btn-primary">
                            <i class="fas fa-search"></i>
                            搜索
                        </button>
                        <button class="btn btn-outline">
                            <i class="fas fa-redo"></i>
                            重置
                        </button>
                    </div>
                </div>
            </section>

            <!-- 用户表格区域 -->
            <section class="table-section">
                <div class="section-header">
                    <div class="section-title">
                        <i class="fas fa-list-ul"></i>
                        用户列表
                    </div>
                    <div class="section-actions">
                        <button class="btn btn-outline">
                            <i class="fas fa-download"></i>
                            导出用户
                        </button>
                        <button class="btn btn-primary">
                            <i class="fas fa-plus"></i>
                            新建用户
                        </button>
                    </div>
                </div>
                
                <div class="table-container">
                    <table class="users-table">
                        <thead>
                            <tr>
                                <th>用户ID</th>
                                <th>用户名</th>
                                <th>真实姓名</th>
                                <th>角色</th>
                                <th>部门</th>
                                <th>注册时间</th>
                                <th>最后登录</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="user-id">U10001</td>
                                <td class="username-cell">
                                    <div class="user-avatar">
                                        <i class="fas fa-user-circle"></i>
                                    </div>
                                    <span>admin</span>
                                </td>
                                <td>系统管理员</td>
                                <td><span class="role-badge role-admin">管理员</span></td>
                                <td>技术部</td>
                                <td class="time-cell">2023-05-12</td>
                                <td class="time-cell">2024-01-15 15:30</td>
                                <td><span class="status-badge status-active">活跃</span></td>
                                <td class="action-cell">
                                    <button class="action-btn edit" title="编辑">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="action-btn reset" title="重置密码">
                                        <i class="fas fa-key"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="user-id">U10002</td>
                                <td class="username-cell">
                                    <div class="user-avatar">
                                        <i class="fas fa-user-circle"></i>
                                    </div>
                                    <span>operator1</span>
                                </td>
                                <td>张三</td>
                                <td><span class="role-badge role-operator">操作员</span></td>
                                <td>交通部</td>
                                <td class="time-cell">2023-08-21</td>
                                <td class="time-cell">2024-01-15 09:15</td>
                                <td><span class="status-badge status-active">活跃</span></td>
                                <td class="action-cell">
                                    <button class="action-btn edit" title="编辑">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="action-btn reset" title="重置密码">
                                        <i class="fas fa-key"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="user-id">U10003</td>
                                <td class="username-cell">
                                    <div class="user-avatar">
                                        <i class="fas fa-user-circle"></i>
                                    </div>
                                    <span>viewer1</span>
                                </td>
                                <td>李四</td>
                                <td><span class="role-badge role-viewer">观察员</span></td>
                                <td>规划部</td>
                                <td class="time-cell">2023-10-05</td>
                                <td class="time-cell">2024-01-14 14:20</td>
                                <td><span class="status-badge status-active">活跃</span></td>
                                <td class="action-cell">
                                    <button class="action-btn edit" title="编辑">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="action-btn reset" title="重置密码">
                                        <i class="fas fa-key"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="user-id">U10004</td>
                                <td class="username-cell">
                                    <div class="user-avatar">
                                        <i class="fas fa-user-circle"></i>
                                    </div>
                                    <span>auditor1</span>
                                </td>
                                <td>王五</td>
                                <td><span class="role-badge role-auditor">审计员</span></td>
                                <td>审计部</td>
                                <td class="time-cell">2023-11-18</td>
                                <td class="time-cell">2024-01-15 10:45</td>
                                <td><span class="status-badge status-active">活跃</span></td>
                                <td class="action-cell">
                                    <button class="action-btn edit" title="编辑">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="action-btn reset" title="重置密码">
                                        <i class="fas fa-key"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="user-id">U10005</td>
                                <td class="username-cell">
                                    <div class="user-avatar">
                                        <i class="fas fa-user-circle"></i>
                                    </div>
                                    <span>operator2</span>
                                </td>
                                <td>赵六</td>
                                <td><span class="role-badge role-operator">操作员</span></td>
                                <td>交通部</td>
                                <td class="time-cell">2023-12-01</td>
                                <td class="time-cell">2024-01-12 16:30</td>
                                <td><span class="status-badge status-locked">已锁定</span></td>
                                <td class="action-cell">
                                    <button class="action-btn edit" title="编辑">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="action-btn unlock" title="解锁">
                                        <i class="fas fa-lock-open"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="user-id">U10006</td>
                                <td class="username-cell">
                                    <div class="user-avatar">
                                        <i class="fas fa-user-circle"></i>
                                    </div>
                                    <span>new_user</span>
                                </td>
                                <td>钱七</td>
                                <td><span class="role-badge role-viewer">观察员</span></td>
                                <td>规划部</td>
                                <td class="time-cell">2024-01-10</td>
                                <td class="time-cell">-</td>
                                <td><span class="status-badge status-pending">待审核</span></td>
                                <td class="action-cell">
                                    <button class="action-btn approve" title="审核通过">
                                        <i class="fas fa-check"></i>
                                    </button>
                                    <button class="action-btn reject" title="拒绝">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 分页器 -->
                <div class="table-pagination">
                    <div class="pagination-info">
                        显示 1-6 条，共 42 条记录
                    </div>
                    <div class="pagination-controls">
                        <button class="pagination-btn disabled">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button class="pagination-btn active">1</button>
                        <button class="pagination-btn">2</button>
                        <button class="pagination-btn">3</button>
                        <button class="pagination-btn">...</button>
                        <button class="pagination-btn">7</button>
                        <button class="pagination-btn">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </section>
        </div>
    </main>

</body>

</html>